<!-- 订单详情 -->
<template>
  <s-layout title="填写退货物流">
    <!-- 售后商品 -->
    <view class="goods-box">
      <s-goods-item :img="state.goodsItem.goods_image" :title="state.goodsItem.goods_title"
        :skuText="state.goodsItem.goods_sku_text" :price="state.goodsItem.goods_price"
        :num="state.goodsItem.goods_num"></s-goods-item>
    </view>

    <uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
      <!-- 物流公司 -->
      <view class="refund-item">
        <view class="item-title">物流公司</view>
        <view class="input-box express-company-input-box">
          <uni-easyinput 
            :inputBorder="false" 
            type="text"
            @input="onChangeExpressCompany"
            v-model="formData.express_name" 
            placeholder="请输入您的物流公司"
            paddingLeft="10" />
          <view class="express-company-list" v-if="state.showExpressCompanyList">
            <view class="express-company-item" @tap="onSelectExpressCompany(item)" v-for="item in state.logisticsCompanyList" :key="item.code">{{ item.name }}</view>
          </view>
        </view>
        
      </view>
      <!-- 物流单号 -->
      <view class="refund-item">
        <view class="item-title">物流单号</view>
        <view class="input-box">
          <uni-easyinput 
            :inputBorder="false" 
            type="text" 
            v-model="formData.express_number" 
            placeholder="请输入您的物流单号"
            paddingLeft="10" />
        </view>
      </view>
      <!-- 电话 -->
      <view class="refund-item ss-m-t-20">
        <view class="item-title">联系方式</view>
        <view class="input-box">
          <uni-easyinput 
            :inputBorder="false" 
            type="number"
            :maxlength="11"
            v-model="formData.express_phone" 
            placeholder="请输入您的联系电话"
            paddingLeft="10" />
        </view>
      </view>

      <!-- 退货说明 -->
      <view class="desc-item ss-m-t-20">
        <view class="item-title ss-m-b-20">退货说明</view>
        <view class="describe-box">
          <uni-easyinput :inputBorder="false" class="describe-content" type="textarea" maxlength="120" autoHeight
            v-model="formData.express_info" placeholder="客官~请描述您遇到的问题，建议上传照片"></uni-easyinput>
        </view>
      </view>

      <!-- 上传凭证 -->
      <view class="desc-item ss-m-t-20">
        <view class="item-title ss-m-b-20">上传凭证</view>
        <view class="describe-box">
          <view class="upload-img">
            <s-uploader v-model:url="formData.voucher" fileMediatype="image" limit="3" :sizeType="['original']" mode="grid"
              :imageStyles="{ width: '168rpx', height: '168rpx' }" />
          </view>
        </view>
      </view>
    </uni-forms>
    <!-- 底部按钮 -->
    <su-fixed bottom placeholder>
      <view class="foot-wrap">
        <view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
          <button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="submit">提交</button>
        </view>
      </view>
    </su-fixed>

  
  </s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, unref } from 'vue';
const form = ref(null);
const state = reactive({
  showModal: false,
  currentValue: 0,
  goodsItem: {
    
  },
  reasonText: '',
  logisticsCompanyList: [],
  showExpressCompanyList: false,
});
const formData = reactive({
  id: '',
  express_code: '',
  express_name: '',
  express_number: '',
  express_phone: '',
  express_info: '',
  voucher: [],
});
const rules = reactive({});

const onChangeExpressCompany = async (val) => {
  console.log(val, 'val');
  if (val) {
    try {
      state.showExpressCompanyList = true;
      const { error, data } = await sheep.$api.order.aftersale.expressCompany(val);
      console.log(error, 'error');
      console.log(data, 'data=logisticsCompanyList');
      if (error === 0) {
        state.logisticsCompanyList = data.data;
      }
    } catch (error) {
      console.log(error, 'error');
      uni.showToast({
        title: '请输入正确的物流公司',
        icon: 'none',
      });
    }
  } else {
    state.logisticsCompanyList = [];
    state.showExpressCompanyList = false;
  }
  
}

const onSelectExpressCompany = (item) => {
  console.log(item, 'item');
  formData.express_name = item.name;
  formData.express_code = item.code;
  state.showExpressCompanyList = false;
}

// 提交表单
async function submit() {
  
  // #ifdef MP
  sheep.$platform.useProvider('wechat').subscribeMessage('order_aftersale_change');
  // #endif
  let data = {
    ...formData
  };
  const res = await sheep.$api.order.aftersale.submit(data);
  if (res.error === 0) {
    uni.showToast({
      title: res.msg,
    });
    sheep.$router.go('/pages/order/aftersale/detail', { id: state.goodsItem.id})
  }
}

//选择售后类型
function onRefundChange(e) {
  formData.type = e.detail.value;
}

//确定
function onReason() {
  formData.reason = state.reasonText;
  state.showModal = false;
}

function onTitle(e, title) {
  state.currentValue = e;
  state.reasonText = title;
}
onLoad((options) => {
  console.log(options, 'options');
  state.goodsItem = JSON.parse(options.item);
  console.log(state.goodsItem, 'state.goodsItem');
  formData.id = state.goodsItem.id
});
</script>

<style lang="scss" scoped>
@import '../style/returnForm.scss';
</style>
